[iOS] 超簡単！ACEDrawingView でお絵描きアプリを作ってみよう

はじめに

環境

今回は下記で試してます。

項目	バージョン
XCODE	6.1.1
iOS SDK	8.1
ACEDrawingView	1.3.2

インストール方法

新規でプロジェクトを作った後、（プロジェクトテンプレートはSingleViewApplicationでOKです） CocoaPods で

pod 'ACEDrawingView'

pod installでインストール完了です。

最短実装

1. Main.storyboardを開きます
2. 最初の画面のViewControllerに対して、UIViewを追加します。(レイアウトも調整します)
3. 追加してUIViewのクラスにACEDrawingViewを設定します。

・・・以上です。( ﾟдﾟ) タイムアタック出来そうな感じのお手軽さです。

実行するとタッチでお絵描きが出来ます。

このままだと、ペンの太さや色など変更出来ないので、きちんとUIを作る必要はあります。

各種プロパティ

描画タイプ

ペンや図形など描画タイプを切り替える事が出来ます。

プロパティ名	型
drawTool	ACEDrawingToolType

コードサンプル

// 描画タイプを線にする
self.drawingView.drawTool = ACEDrawingToolTypeLine;

ACEDrawingToolTypeには以下の種類があります

	説明
ACEDrawingToolTypePen	ペン
ACEDrawingToolTypeLine	線
ACEDrawingToolTypeRectagleStroke	四角（線のみ）
ACEDrawingToolTypeRectagleFill	四角（塗りつぶし）
ACEDrawingToolTypeEllipseStroke	円（線のみ）
ACEDrawingToolTypeEllipseFill	円（塗りつぶし）
ACEDrawingToolTypeEraser	消しゴム
ACEDrawingToolTypeText	テキスト入力

カラー

描画する色を設定します。

プロパティ名	型
lineColor	UIColor

コードサンプル

// 描画色を赤にする
self.drawingView.lineColor = [UIColor redColor];

線の太さ

ペンや図形線の太さを設定します。単位はポイントです。

プロパティ名	型
lineWidth	CGFloat

コードサンプル

self.drawingView.lineWidth = 5.0f;

アルファ

描画の透明度を(0.0〜1.0)の間で設定します。0が透明です。

プロパティ名	型
lineAlpha	CGFloat

コードサンプル

self.drawingView.lineAlpha = 0.5f;

Undo

Undoを実行します。

メソッド名	戻り値
undoLatestStep	無し

コードサンプル

// undoを実行する
[self.drawingView undoLatestStep];

Undo可能かどうか

Undo処理の可否をBOOL値で返します。 YESであればUndoを実行できる事ができます。

メソッド名	戻り値
canUndo	BOOL

コードサンプル

// Undoできるかどうかでボタンの状態を切り替える
self.undoButton.enabled = [self.drawingView canUndo];

Undo可能ステップ数

Undoすることが可能なステップ数を取得出来ます。（読み取り専用）

プロパティ名	型
undoSteps	NSUInteger

Redo

Redoを実行します。

メソッド名	戻り値
redoLatestStep	無し

コードサンプル

// redoを実行する
[self.drawingView redoLatestStep];

Redo可能かどうか

Redo処理の可否をBOOL値で返します。 YESであればRedoを実行できる事ができます。

メソッド名	戻り値
canRedo	BOOL

コードサンプル

// Redoできるかどうかでボタンの状態を切り替える
self.redoButton.enabled = [self.drawingView canRedo];

Redo可能ステップ数

Redoすることが可能なステップ数を取得出来ます。（読み取り専用）

プロパティ名	型
redoSteps	NSUInteger

全消し

全て削除します。Undo/Redoの状態もクリアされます。

メソッド名	戻り値
clear	無し

コードサンプル

// 全てを削除します
[self.drawingView clear];

画像のロード

指定した画像を読み込む事が出来ます。そのままいれると、アスペクト比を無視してビューのサイズに合わせた縮尺になるので、入れる前に一工夫が必要になります。

メソッド名	戻り値
loadImage:(UIImage *)image	無し

コードサンプル

// sample画像を読み込む
[self.drawingView loadImage:[UIImage imageNamed:@"sample"]];

また、引数がNSDataのloadImageData:(NSData *)imageDataも用意されています。

保存

描いたものをUIImageで取得できます。（読み取り専用） 端末のアルバム等に保存する処理は自分で実装する必要があります。

プロパティ名	型
image	UIImage

ACEDrawingViewDelegate

任意で下記のDelegateを実装することが出来ます。

描画開始

- (void)drawingView:(ACEDrawingView *)view willBeginDrawUsingTool:(id<ACEDrawingTool>)tool;

• view 描画対象のACEDrawingView
• tool 描画タイプ

描画終了

- (void)drawingView:(ACEDrawingView *)view didEndDrawUsingTool:(id<ACEDrawingTool>)tool;

• view 描画対象のACEDrawingView
• tool 描画タイプ

さいごに

お絵描きアプリがこんなに簡単に作れてしまうのって凄いと思います。 興味のある方は、ぜひお試し下さいー(・▽<)☆彡 オススメです。